<template>
	<div class="main">
		<navTop></navTop>
		<div class="breadBox">
			<el-breadcrumb separator="/">
			  <el-breadcrumb-item :to="{ path: '/examindex' }">首页</el-breadcrumb-item>
			  <el-breadcrumb-item :to="{ path: '/reviewmonitoring' }">评阅监控</el-breadcrumb-item>
			  <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="contentMain">
			<div class="searchlist">
				 <router-link :to="'/allmonitoringoverview?examid='+$route.query.examid+'&name='+$route.query.name" active-class="hover">与全体一致性</router-link>
				 <router-link to="/">个人一致性</router-link>
				 <router-link to="/">抽查评阅</router-link>
				 <router-link :to="'/abnormaltestpaper?examid='+$route.query.examid+'&name='+$route.query.name" active-class="hover">异常试卷</router-link>
				 <router-link :to="'/multievaluationmanagement?examid='+$route.query.examid+'&name='+$route.query.name" active-class="hover">多评管理</router-link>
			</div>
			<div class="jkgailanContent">
				<div class="jkgailanContentLeft">
					<el-menu
					      class="el-menu-vertical-demo"
						  :unique-opened="true"
						  :default-openeds="defaultOpeneds"
						  @open="openparen">
					      <el-submenu :index="item.examCourseId.toString()" v-for="item in menulist" :key="item.examCourseId" >
					        <template slot="title">
					          <span>{{item.examCourseName}}</span>
					        </template>
							<el-menu-item 
							  v-for="(children, index) in item.progresses"
							  :key="index"
							  :index="children.path">
							</el-menu-item>
					      </el-submenu>
					</el-menu>
				</div>
				<div class="jkgailanContentRight">
					<div class="echartsContent">
						<div class="echartInfo">
							<div>
								<span>单体教师与全体教师在每个得分点所占比例的对比情况 </span>
								<p>全体教师数据：<b>最高分<i>58分</i>/平均分 <i>58分</i>/最低分 <i>58分</i></b></p>
							</div>
							<div class="boxinfoset">
								<em>隐藏图标</em>
								<ul>
									<li>全体</li>
									<li>示例教师1</li>
									<li>示例教师2</li>
								</ul>
							</div>
						</div>
						<div ref="tongji" style="width:100%;height:318px;margin-top:70px"></div>
						<div class="chooseselect">
							<el-select v-model="teacherval" placeholder="选择教师">
							    <el-option
							      v-for="item in options"
							      :key="item.value"
							      :label="item.label"
							      :value="item.value">
							    </el-option>
							</el-select>
						</div>
						<div class="tableStyle">
							<table cellspacing="0" cellpadding="0" style="width:100%">
								<tr>
									<th>题组</th>
									<th>评阅/仲裁总量</th>
									<th>已评/已仲裁</th>
									<th>未评/未仲裁</th>
									<th>异常试卷</th>
									<th>评阅进度</th>
									<th>评阅教师</th>
									<th>手机号&账号</th>
									<th>状态</th>
								</tr>
								<tr v-for="item in progresslist" :key="item.questionId">
									<td>{{item.questionNumber}}</td>
									<td>{{item.totalReviewCount}}</td>
									<td>{{item.reviewedCount}}</td>
									<td>{{item.pendingReviewCount}}</td>
									<td>{{item.abnormalPaperCount}}</td>
									<td v-if="item.reviewedCount!=0&&item.totalReviewCount!=0">{{((item.reviewedCount/item.totalReviewCount)*100).toFixed(2)}}%</td>
									<td v-else>0%</td> 
									<td>{{item.reviewer}}</td>
									<td>{{item.account}}</td>
									<td><span class="online">{{item.isOnline?'在线':'不在线'}}</span></td>
								</tr>
							</table>
						</div>
						<!-- <div class="examFootercontent">
							<el-pagination
								background
							      @size-change="handleSizeChange"
							      @current-change="handleCurrentChange"
							      :current-page.sync="currentPage3"
							      :page-size="100"
								  :pager-count="5"
							      layout="prev, pager, next, jumper"
							      :total="1000">
							    </el-pagination>
						</div> -->
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import navTop from "../../components/school/head.vue"
	import echarts from 'echarts'
	import {get,post,del,dele,put} from '../../request/api.js'
	export default{
		data(){
			return{
				options:{
					tooltip: {
					    trigger: 'axis'
					},
					 xAxis: {
					    type: 'category',
					    data: ['120以上','100-120','80-100','60-80','40-60','20-40','0-20']
					  },
					  yAxis: {
					    type: 'value',
						axisLine: {
							show: false, // 不显示坐标轴线
						},
						axisTick:{
							show:false // 不显示坐标轴刻度线
						},
					  },
					  series: [{
						label: {
							show: true,
							position: "top",
							formatter: function(params){}
						  },
						data: [10,1,50,100,200,10,20],
						type: 'line',
						color: ['#5087EC','#68BBC4','#58A55C','#F2BD42','#EE752F','#D95040','#D97559','#E4C477','#DAA67B','#4E9C8F','#4786B4','#2E4552','#D1D5D9','#7E858C','#B3B9BF'],
					}]
				},
				openedMenus: [],
				menulist:[],
				progresslist:[],
				teacherval:'',
				defaultOpeneds: [], // 默认展开的菜单项 ID
				subjectid:0,
				questionid:0,
				teacherid:0
			}
		},
		mounted() {
			this.subjectlist()
			// 默认展开第一个菜单项
			if (this.menulist.length > 0) {
			  this.defaultOpeneds.push(this.menulist[0].examCourseId.toString())
			}
			setTimeout(()=>{
				this.getechartaverage()
			},800)
		},
		methods:{
			// 获取全科进度
			subjectlist(){
				let obj = {
					examId:this.$route.query.examid
				}
				get('/reviewmonitor/progress',obj)
				.then(res=>{
					// //console.info(res)
					if(res.code==200){
						this.subjectid = res.data[0].examCourseId
						this.progresslistclick()
						res.data.map(item=>{
							item.progresses.map(chil=>{
								chil.subjectprogress = chil.reviewedCount==0||chil.totalReviewCount==0?0:((chil.reviewedCount/chil.totalReviewCount)*100).toFixed(2)
							})
						})
						this.menulist = res.data
						//console.info(res.data)
					}else{
						this.$message.error(res.message)
					}
				})
			},
			// 阅卷进度
			progresslistclick(){
				let obj={
					examCourseId:this.subjectid,
					questionId:this.questionid,
					teacherId:this.teacherid
				}
				get('/monitor/progress',obj)
				.then(res=>{
					//console.info(res)
					if(res.code==200){
						this.progresslist = res.data.progresss
					}else{
						this.$message.error(res.message)
					}
				})
			},
			//获取平均分统计
			getechartaverage(){
				let myChart = echarts.init(this.$refs.tongji);
				myChart.setOption(this.options)
			},
			openparen(key) {
				this.defaultOpeneds.push(key.toString())
				this.subjectid = key
				this.questionid = 0
				this.progresslistclick()
			},
			elmenuidclick(id){
				this.questionid = id
				this.progresslistclick()
			}
		},
		components:{navTop}
	}
</script>

<style scoped>
	.main{
		width:100vw;
		height:100vh;
		background: #F4F7FD;;
		overflow-x:hidden;
		overflow-y: auto;
	}
	.contentMain{
		width:auto;padding:0 40px;
		margin:0 auto;
		padding-bottom:20px;
	}
	.breadBox{
		height:32px;
		background: #Fff;
		line-height: 32px;
		margin-top:2px
	}
	.el-breadcrumb{
		width:auto;padding:0 40px;
		margin:0 auto;
		line-height:30px;
		font-size:14px;
	}
	.el-breadcrumb__inner a, .el-breadcrumb__inner.is-link{
		color:#B3B8C2
	}
	.searchlist{
		box-sizing: border-box;
		width:auto;padding:0 40px;
		display: flex;
		justify-content: space-between;
		height: 54px;
		background: #FFFFFF;
		border-radius: 10px;
		padding:0 24px;
		align-items: center;
		margin-top:14px;
	}
	.searchlist{
		padding-left:20px;
		display: flex;
		align-items: center;
		justify-content: left;
	}
	.searchlist a{
		display: block;
		color:#557292;
		font-size:14px;
		width:100px;
		text-align: center;
		position: relative;
		line-height:52px;
	}
	.searchlist a:hover,.searchlist a.hover{
		color:#295CFF;
	}
	.searchlist a:hover::after,.searchlist a.hover::after{
		content:'';
		width: 24px;
		height: 4px;
		background: #295CFF;
		border-radius: 2px;
		position: absolute;
		left:50%;
		transform: translateX(-50%);
		bottom:0;
	}
	.jkgailanContent{
		display: flex;
		justify-content: space-between;
		margin-top:14px;
	}
	.jkgailanContentLeft{
		width: 180px;
		height:calc(100vh - 200px);
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		overflow-y:auto ;
		overflow-x: hidden;
	}
	.jkgailanContentLeft::-webkit-scrollbar {
		 width:6px;
		background-color: #eee;
		border-radius:10px;
	}
	.jkgailanContentLeft::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.jkgailanContentLeft::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.el-submenu__title{
		height: 42px;
		background: #FAFAFB;
		border-radius: 10px 10px 0px 0px;
		line-height:42px;
	}
	.el-menu{
		border:none;
		background:none;
		font-size:14px;
		color:#2A303B;
		border-radius:10px;
	}
	.el-submenu .el-menu-item{
		padding:0 24px !important;
		color:#8E96A4;
		min-width:auto;
	}
	.el-menu-item:focus, .el-menu-item:hover{
		background:none;
		color:#295CFF;
	}
	
	.el-menu li:nth-child(2n){
		background: #FAFAFB;
	}
	.jkgailanContentRight{
		width:calc(100% - 195px);
		height:calc(100vh - 200px);
		background: #FFFFFF;
		box-shadow: 0px 4px 16px 0px rgba(85,114,146,0.1);
		border-radius: 10px;
		overflow-y:auto ;
		overflow-x: hidden;
	}
	.jkgailanContentRight::-webkit-scrollbar {
		 width:6px;
		background-color: #eee;
		border-radius:10px;
	}
	.jkgailanContentRight::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.jkgailanContentRight::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.echartsContent{
		position:relative;
	}
	.echartInfo{
		width:85%;
		position:absolute;
		left:60px;
		top:-50px;
		display: flex;
		justify-content: space-between;
		font-size:14px;
		color:#2A303B;
		line-height:1.6
	}
    .echartInfo p{
		color:#5B6371;
		line-height:2.4
	}
	.echartInfo p b{
		color:#5B6371;
	}
	.echartInfo p b i{
		color:#295CFF;
		font-style:normal
	}
	.boxinfoset{
		text-align: right;
	}
	.boxinfoset ul{
		display: flex;
		align-items: center;
	}
	.boxinfoset ul li{
		margin-left:30px;
		position:relative;
		padding-left:20px;
	}
	.boxinfoset ul li:nth-child(1):before{
		content:'';
		width: 14px;
		height: 4px;
		background: #295CFF;
		position:absolute;
		left:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfoset ul li:nth-child(2):before{
		content:'';
		width: 14px;
		height: 4px;
		background: #EC555A;
		position:absolute;
		left:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfoset ul li:nth-child(3):before{
		content:'';
		width: 14px;
		height: 4px;
		background: #288F41;
		position:absolute;
		left:0;
		top:50%;
		transform: translateY(-50%);
	}
	.boxinfoset em{
		display: inline-block;
		width: 104px;
		height: 34px;
		background: #F2F6FB;
		border-radius: 10px;
		border: 1px solid #295CFF;
		font-size:14px;
		color:#295CFF;
		text-align: center;
		line-height:34px;
		margin-bottom:8px;
	}
	.tableStyle{
		background:#fff;
		padding:14px;
		overflow-y: auto;
		overflow-x: hidden;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar {
		 width:4px;
		background-color: #eee;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar-track {
		background-color: #eee;
		border-radius:10px;
	}
	.tableStyle::-webkit-scrollbar-thumb {
		background: #619CF5;
		border-radius: 10px;
	}
	.tableStyle table{
		border-radius: 10px;
		border: 1px solid rgba(216,228,240,0.5);
	}
	.tableStyle table tr th{
		font-size:14px;
		font-weight:normal;
		background:#E8F0FA;
		height:42px;
	}
	.tableStyle table tr th:first-child{
		border-radius: 8px 0 0 0;
	}
	.tableStyle table tr th:last-child{
		border-radius: 0 8px 0 0;
	}
	.tableStyle table tr td{
		height:42px;
		text-align: center;
		font-size:14px;
		border-right:solid 1px rgba(216,228,240,0.34);
	}
	.tableStyle table tr td:last-child{
		border-right:none;
	}
	.tableStyle table tr td span.online{
		display: inline-block;
		color:#288F41;
		width: 48px;
		height: 22px;
		background: rgba(40,143,65,0.06);
		border-radius: 6px;
		border: 1px solid rgba(40,143,65,0.5);
	}
	.tableStyle table tr:nth-child(3n){
		background:#FAFAFB
	}
	.tableStyle table tr td .el-input__inner{
		width: 100px;
		height: 30px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.tableStyle table tr td .el-input__icon{
		line-height:30px;
	}
	.chooseselect {
		padding:0 14px;
	}
	.chooseselect .el-input__inner{
		width: 124px;
		height: 34px;
		border-radius: 10px;
		border: 1px solid #D8E4F0;
	}
	.chooseselect .el-input__icon{
		line-height:34px;
	}
	.examFootercontent{
		padding:0 14px 30px;
		text-align: right;
	}
	.examFootercontent >>> .el-pagination__jump{
		margin-left:5px;
	}
	.examFootercontent >>> .el-pager{
		margin-top:2px;
	}
	.examFootercontent >>> .el-pager li{
		margin:0 3px;
		min-width:25px;
		height: 25px;
		line-height: 25px
	}
	.examFootercontent >>> .el-pagination button{
		margin-top:2px;
	}
	.breadBox >>> .el-breadcrumb__inner a,.breadBox >>> .el-breadcrumb__inner.is-link{
		font-weight:normal
	}
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover,
	.breadBox >>> .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover{
		font-weight:bold
	}
</style>